<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>经理管理</title>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>经理编号</th>
            <th>员工身份证号</th>
        </tr>
        </thead>
        <tbody id="managerTableBody">
        <!-- Table content will be dynamically populated here -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加经理模态框 -->
<div class="modal fade" id="addManagerModal" tabindex="-1" role="dialog" aria-labelledby="addManagerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addManagerModalLabel">添加经理</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加经理表单 -->
                <form id="addManagerForm" >
                    <div class="form-group">
                        <label for="managerID">经理编号</label>
                        <input type="text" class="form-control" id="managerID" name="managerID">
                    </div>
                    <div class="form-group">
                        <label for="idNumber">员工身份证号</label>
                        <input type="text" class="form-control" id="idNumber" name="idNumber">
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑经理模态框 -->
<div class="modal fade" id="editManagerModal" tabindex="-1" role="dialog" aria-labelledby="editManagerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editManagerModalLabel">编辑经理</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑经理表单 -->
                <form id="editManagerForm" >
                    <input type="hidden" id="editManagerID" name="managerID">
                    <div class="form-group">
                        <label for="editIdNumber">员工身份证号</label>
                        <input type="text" class="form-control" id="editIdNumber" name="idNumber">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    // 加载经理数据的函数
    function loadManagerData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/managergg?operation=getManagersByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 清空表格内容
                $("#managerTableBody").empty();
                // 填充表格数据
                $.each(data.data, function (index, manager) {
                    // 为每行添加data-id属性
                    $("#managerTableBody").append(
                        "<tr data-id='" + manager.managerID + "'>" +
                        "<td>" + manager.managerID + "</td>" +
                        "<td>" + manager.idNumber + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加经理表单的函数
    $("#addManagerForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/managergg?operation=addManager",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 添加成功后重新加载数据
                loadManagerData(1, 5); // 添加后重新加载第一页数据
                // 重置表单并关闭模态框
                $("#addManagerForm")[0].reset();
                $("#addManagerModal").modal("hide");
                // 显示成功信息
                alert("经理添加成功！");
            },
            error: function () {
                alert("添加经理时出错！");
            }
        });
    });

    // 填充编辑经理模态框数据的函数
    function populateEditModal(managerID) {
        var managerRow = $("table tbody").find("tr[data-id='" + managerID + "']");
        var idNumber = managerRow.find("td:eq(1)").text();

        // 填充表单字段
        $("#editManagerID").val(managerID);
        $("#editIdNumber").val(idNumber);
    }

    // 提交编辑经理表单的函数
    $("#editManagerForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/managergg?operation=updateManager",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 更新成功后重新加载数据
                loadManagerData(1, 5); // 更新后重新加载第一页数据
                // 关闭模态框
                $("#editManagerModal").modal("hide");
                // 显示成功信息
                alert("经理更新成功！");
            },
            error: function () {
                alert("更新经理时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editManager(managerID) {
        populateEditModal(managerID);
        $("#editManagerModal").modal("show");
    }

    // 删除经理的函数
    function deleteManager(managerID) {
        if (confirm("确定要删除这个经理吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/managergg?operation=deleteManager",
                type: "POST",
                data: { managerID: managerID },
                dataType: "json",
                success: function (data) {
                    // 删除成功后重新加载数据
                    loadManagerData(1, 5); // 删除后重新加载第一页数据
                    // 显示成功信息
                    alert("经理删除成功！");
                },
                error: function () {
                    alert("删除经理时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            // 加载上一页数据
            loadManagerData(currentPage - 1, 5); // 假设每页5条数据
            $("#prevPageBtn").data("currentPage", currentPage - 1); // 更新当前页码
            $("#nextPageBtn").data("currentPage", currentPage - 1); // 更新下一页按钮的当前页码
        }
    });

    $("#nextPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        // 加载下一页数据
        loadManagerData(currentPage + 1, 5); // 假设每页5条数据
        $("#prevPageBtn").data("currentPage", currentPage + 1); // 更新上一页按钮的当前页码
        $("#nextPageBtn").data("currentPage", currentPage + 1); // 更新当前页码
    });

    $(document).ready(function () {
        // 页面加载时加载第一页经理数据
        loadManagerData(1, 5); // 假设每页5条数据
        // 设置分页按钮的初始页码
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);
    });

    // 手动移除modal时清空表单
    $('#addManagerModal, #editManagerModal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
    });
    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addManagerModal, #editManagerModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });

</script>
</body>
</html>
